<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-11-11 22:19:35
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印交班单</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000000;
      }
      .handover-card-box {
        background: #ffffff;
        box-sizing: border-box;
        overflow-y: scroll;
        margin: 4px 0;
      }
      .flex-row {
        display: flex;
        flex-direction: row;
      }

      .flex-col {
        display: flex;
        flex-direction: column;
      }

      .justify-start {
        justify-content: flex-start;
      }

      .justify-center {
        justify-content: center;
      }

      .justify-end {
        justify-content: flex-end;
      }

      .justify-evenly {
        justify-content: space-evenly;
      }

      .justify-around {
        justify-content: space-around;
      }

      .justify-between {
        justify-content: space-between;
      }

      .items-start {
        align-items: flex-start;
      }

      .items-center {
        align-items: center;
      }

      .items-end {
        align-items: flex-end;
      }
      .text_15 {
        align-self: center;
        color: #353535;
      }
      .text_70 {
        margin-top: 7px;
        align-self: center;
      }
      .font_5 {
        font-size: 18px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .font_2 {
        font-size: 14px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .space-x-line {
        margin-top: 4px;
        width: 100%;
        background: #000;
        height: 1px;
      }
      .font_6 {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
      }
      .font_8 {
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000;
      }
      .font_9 {
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000;
      }
      .group_17 {
        margin-top: 20px;
      }
      .group_18 {
        margin-top: 2px;
      }
      .group_49 {
        margin-top: 10px;
        padding-top: 20px;
        border-top: solid 1px #e2e2e2;
      }
      .group_59 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_60 {
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_62 {
        margin-top: 5px;
      }
      .group_65 {
        margin-top: 8px;
      }
      .group_30 {
        margin-top: 30px;
      }
      .group_64 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .text_101 {
        margin-top: 12px;
        align-self: center;
      }
      .text_106 {
        margin-top: 20px;
        align-self: center;
      }
      .text-wrapper_16 {
        align-self: center;
        padding-top: 10px;
        margin-top: 10px;
        width: 100%;
        border-top: solid 1px #e2e2e2;
      }
      .dgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-align: center;
      }
      .dgrid > span:last-child {
        text-align: right;
      }

      .dgrid > span:first-child {
        text-align: left;
      }
      .dgrid3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .dgrid4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .dgrid15 {
        grid-template-columns: 1fr 100px 1fr;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card">
        <div class="flex-col" style="width: 100%">
          <h1 class="title">收银交班单</h1>
          <div class="flex-row justify-between items-center group_17">
            <div class="font_8">交班单号：</div>
            <div class="font_9">
              {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'ticket_id', '无') }}
            </div>
          </div>
          <div class="flex-col">
            <div class="flex-row justify-between items-center group_18">
              <div class="font_8">营业日期：</div>
              <div class="font_9">
                {{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.shiftReportInfo.work_day', '无' ) }}
              </div>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <div class="font_8">开班时间：</div>
              <div class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.start_time', '无' ) }}
              </div>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">交班时间：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.end_time', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">交班人：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.clerk_name', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">账单数：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.bill_count', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">开台数量：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.record_count', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">单均消费：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.avg_bill_amount', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">桌均消费：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.avg_record_amount', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">消费人数：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.customer_count', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">人均消费：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.avg_customer_amount', '无' ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">收银站点：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftReportInfo.computer_name', '无' ) }}</span
              >
            </div>
          </div>
          <template>
            <div class="space-x-line"></div>
            <span class="font_8 text_70">交班统计</span>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">消费合计</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.shiftSummary.pay_total', '0') }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">会员充值</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftSummary.recharge_total', '0' ) }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">会员消费</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftSummary.vip_pay_total', '0' ) }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">收入合计</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.shiftSummary.income_total', '0') }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">退菜合计</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.shiftSummary.back_total', '0') }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">赠送合计</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftSummary.present_total', '0' ) }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">备用金</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftSummary.reserve_before', '0' ) }}
              </span>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">应交金额</span>
              <span class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData,
                'detail.shiftSummary.reserve_after', '0' ) }}
              </span>
            </div>
          </template>
          <template v-if="categorySales.length > 0">
            <div class="space-x-line"></div>
            <span class="font_8 text_70">大类销售汇总</span>
            <div class="dgrid group_65">
              <span class="font_8">大类</span>
              <span class="font_8">金额</span>
              <span class="font_8">数量</span>
              <span class="font_8">退菜</span>
              <span class="font_8">赠送</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid group_62" v-for="(item, index) in categorySales">
              <span class="font_8">{{ item.category }}</span>
              <span class="font_8">{{ item.money }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.back_num || 0 }}</span>
              <span class="font_8">{{ item.present_num || 0 }}</span>
            </div>
          </template>
          <!-- v-if="foodCategorySales.length > 0" -->
          <template>
            <span class="font_8 text_70">销售类目汇总</span>
            <div class="dgrid dgrid15 group_65">
              <span class="font_8">类目</span>
              <span class="font_8">部门出品数量</span>
              <span class="font_8">销售流水</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62" v-for="(item, index) in foodCategorySales">
              <span class="font_8">{{ item.category }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
          </template>
          <template v-if="invoiceDetails.length > 0">
            <span class="font_8 text_106">账单明细</span>
            <div class="flex-row justify-between items-center group_65">
              <span class="font_8">账单</span>
              <span class="font_8">消费金额</span>
            </div>
            <div class="space-x-line"></div>
            <div
              class="flex-row justify-between items-center group_62"
              v-for="(item, index) in invoiceDetails"
            >
              <span class="font_8">{{ item.order_id }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
          </template>
          <template v-if="payTypeSummary.length > 0">
            <span class="font_8 text_106">支付方式汇总</span>
            <div class="dgrid dgrid3 group_65">
              <span class="font_8">付款方式</span>
              <span class="font_8">笔数</span>
              <span class="font_8">金额</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62" v-for="(item, index) in payTypeSummary">
              <span class="font_8">{{ item.client }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
          </template>
          <template v-if="realPayTypeSummary.length > 0">
            <span class="font_8 text_106">实收</span>
            <div class="dgrid dgrid3 group_65">
              <span class="font_8">支付方式</span>
              <span class="font_8">笔数</span>
              <span class="font_8">金额</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62" v-for="(item, index) in realPayTypeSummary">
              <span class="font_8">{{ item.client }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62">
              <span class="font_8">合计</span>
              <span class="font_8">{{ realPayTypeSummaryNum }}</span>
              <span class="font_8">{{ realPayTypeSummaryTotal }}</span>
            </div>
          </template>
          <template v-if="virtualPayTypeSummary.length > 0">
            <span class="font_8 text_106">虚收</span>
            <div class="dgrid dgrid3 group_65">
              <span class="font_8">支付方式</span>
              <span class="font_8">笔数</span>
              <span class="font_8">金额</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62" v-for="(item, index) in virtualPayTypeSummary">
              <span class="font_8">{{ item.client }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62">
              <span class="font_8">合计</span>
              <span class="font_8">{{ virtualPayTypeSummaryNum }}</span>
              <span class="font_8">{{ virtualPayTypeSummaryTotal }}</span>
            </div>
          </template>
          <template v-if="regionSummary.length > 0">
            <span class="font_8 text_106">台区消费汇总</span>
            <div class="flex-row justify-between items-center group_65">
              <span class="font_8">台区类型</span>
              <span class="font_8">台区合计金额</span>
            </div>
            <div class="space-x-line"></div>
            <div
              class="flex-row justify-between items-center group_62"
              v-for="(item, key) in regionSummary"
              :key="item"
            >
              <span class="font_8">{{ item.region }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
          </template>
          <template v-if="rechargeList.length > 0">
            <span class="font_8 text_70">充值明细</span>
            <div class="dgrid dgrid4 group_65">
              <span class="font_8">充值类目</span>
              <span class="font_8">付款方式</span>
              <span class="font_8">笔数</span>
              <span class="font_8">金额</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid4 group_62" v-for="item in rechargeList">
              <span class="font_8">{{ item.plan_name }}</span>
              <span class="font_8">{{ item.payment }}</span>
              <span class="font_8">{{ item.num }}</span>
              <span class="font_8">{{ item.money }}</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid4 group_62">
              <span class="font_8">合计</span>
              <span class="font_8"></span>
              <span class="font_8">{{ rechargeListTotal }}</span>
              <span class="font_8"
                >{{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.rechargeDetails.total', '0') }}
              </span>
            </div>
          </template>
          <template v-if="accountReceivablesDetails.length > 0">
            <span class="font_8 text_70">挂账明细</span>
            <div class="dgrid dgrid4 group_65">
              <span class="font_8">类型</span>
              <span class="font_8">挂账账户</span>
              <span class="font_8">金额</span>
              <span class="font_8">操作人</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid4 group_62" v-for="item in accountReceivablesDetails">
              <span class="font_8">{{ item.type }}</span>
              <span class="font_8">{{ item.name }}</span>
              <span class="font_8">{{ item.money }}</span>
              <span class="font_8">{{ item.clerk }}</span>
            </div>
          </template>
          <template v-if="repaymentDetails.length > 0">
            <span class="font_8 text_70">挂账回款明细</span>
            <div class="dgrid dgrid4 group_65">
              <span class="font_8">回款账户</span>
              <span class="font_8">回款方式</span>
              <span class="font_8">回款单号</span>
              <span class="font_8">操作人</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid4 group_62" v-for="item in repaymentDetails">
              <span class="font_8">{{ item.name }}</span>
              <span class="font_8">{{ item.payment }}</span>
              <span class="font_8">{{ item.log_id }}</span>
              <span class="font_8">{{ item.clerk }}</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid4 group_62">
              <span class="font_8">合计</span>
              <span class="font_8"></span>
              <span class="font_8"></span>
              <span class="font_8">
                {{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.repaymentDetails.total', '0') }}
              </span>
            </div>
          </template>
          <template v-if="reverseBillingRecords.length > 0">
            <span class="font_8 text_106">反结账记录</span>
            <div class="dgrid dgrid3 group_65">
              <span class="font_8">反结单号</span>
              <span class="font_8">反结人</span>
              <span class="font_8">金额</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62" v-for="item in reverseBillingRecords">
              <span class="font_8">{{ item.order_id }}</span>
              <span class="font_8">{{ item.clerk }}</span>
              <span class="font_8">{{ item.sub_money }}</span>
            </div>
            <div class="space-x-line"></div>
            <div class="dgrid dgrid3 group_62">
              <span class="font_8">合计</span>
              <span class="font_8"></span>
              <span class="font_8">
                {{ fetchObjectDeepAttrValue(workLogTicketDetailData,
                'detail.repaymentDetails.total', '0') }}
              </span>
            </div>
          </template>
          <div class="flex-row justify-between items-center group_30">
            <span class="font_8">备用金</span>
            <span class="font_9">
              {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.reserveFund', '0') }}
            </span>
          </div>
          <div class="flex-row justify-between items-center group_62">
            <span class="font_8">交班人签字：</span>
          </div>
          <div class="flex-row justify-between items-center group_62">
            <span class="font_8">审核人签字：</span>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          workLogTicketDetailData: {}
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.workLogTicketDetailData = mess
            console.log(this.workLogTicketDetailData)
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        computed: {
          virtualPayTypeSummaryTotal() {
            return this.virtualPayTypeSummary.reduce((acc, cur) => {
              const money = Number(cur.money) || 0
              return this.mathAdd(acc, money)
            }, 0)
          },
          virtualPayTypeSummaryNum() {
            return this.virtualPayTypeSummary.reduce((acc, cur) => {
              const num = Number(cur.num) || 0
              return this.mathAdd(acc, num)
            }, 0)
          },
          realPayTypeSummaryTotal() {
            return this.realPayTypeSummary.reduce((acc, cur) => {
              const money = Number(cur.money) || 0
              return this.mathAdd(acc, money)
            }, 0)
          },
          realPayTypeSummaryNum() {
            return this.realPayTypeSummary.reduce((acc, cur) => {
              const num = Number(cur.num) || 0
              return this.mathAdd(acc, num)
            }, 0)
          },
          rechargeListTotal() {
            return this.rechargeList.reduce((acc, cur) => {
              const num = Number(cur.num) || 0
              return this.mathAdd(acc, num)
            }, 0)
          },
          rechargeList() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.rechargeDetails.list',
              []
            )
          },
          repaymentDetails() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.repaymentDetails.list',
              []
            )
          },
          reverseBillingRecords() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.reverseBillingRecords.list',
              []
            )
          },
          foodCategorySales() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.foodCategorySales',
              []
            )
          },
          categorySales() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.categorySales',
              []
            )
          },
          invoiceDetails() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.invoiceDetails',
              []
            )
          },
          payTypeSummary() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.payTypeSummary',
              []
            )
          },
          realPayTypeSummary() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.realPayTypeSummary',
              []
            )
          },
          virtualPayTypeSummary() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.virtualPayTypeSummary',
              []
            )
          },
          regionSummary() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.regionSummary',
              {}
            )
          },
          accountReceivablesDetails() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.accountReceivablesDetails',
              []
            )
          }
        },
        methods: {
          fetchObjectDeepAttrValue(parent, attrStr, defaultValue = false) {
            // 通过try-catch来捕捉访问对象失败情况--这是解决嵌套对象重要一步，这样就可以大胆访问对象--这也是封装原因
            // 不封装情况1.访问对象出错，try-catch捕捉到，在catch进行访问对象错误处理
            // 不封装情况2.如果在情况1下，又有多个属性需要进行这样处理，就会需要写多个catch处理，代码可观性上就比封装的差
            let resultValue
            try {
              const attrArray = attrStr.split('.')
              const currObj = attrStr ? parent[attrArray[0]] : parent // 不输入查找属性，默认返回整个对象
              resultValue =
                attrArray.length <= 1
                  ? currObj
                  : this.fetchObjectDeepAttrValue(currObj, attrArray.slice(1).join('.')) // 迭代访问对象
            } catch (e) {
              resultValue = undefined
            }
            if (resultValue) {
              return resultValue
            } else {
              return defaultValue
            }
            // fetchObjectDeepAttrValue应该在js逻辑层处理，HTML模板层只需渲染即可
            // 举个例子,这里的默认初始值是空字符串
            // this.address=fetchObjectDeepAttrValue(res, 'data.detail.detail.shopInfo.address','')
            // 注意事项：不要在HTML模板层写太多的判断，多了代码难以维护哦，或者写在computed和methods
          },
          // 使用十进制字符串规避浮点误差
          toInteger(num) {
            const s = num.toString()
            if (s.indexOf('.') < 0) return { int: num, pow: 1 }
            const len = s.length - s.indexOf('.') - 1
            return { int: Number(s.replace('.', '')), pow: Math.pow(10, len) }
          },
          // 精确加法运算
          mathAdd(a, b) {
            const x = this.toInteger(a)
            const y = this.toInteger(b)
            const pow = Math.max(x.pow, y.pow)
            return (a * pow + b * pow) / pow
          }
        }
      })
    </script>
  </body>
</html>
